
<!--排序组件-->
<template>
  <div>
    <Modal
      v-model="dragSort"
      draggable
      scrollable
      class-name="vertical-center-modal "
      class="dragSortStyle loadingDom"
      title="拖动排序"
    >
      <div v-if="dragSortDdata.length">
        <draggable v-model="dragSortDdata">
          <template v-for="(item, index) in dragSortDdata">
            <div class="dragBox" :key="index">
              <span>{{ index +1 }}</span
              >&nbsp;&nbsp;&nbsp;&nbsp;{{ item[confirmData.forName] }}
            </div>
          </template>
        </draggable>
      </div>
      <div
        v-else
        style="
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100px;
          font-size: 16px;
        "
      >
        暂无可排序数据
      </div>
      <template #footer class="footerBtns">
        <CButton @click="cancel" color="info" class="cancel-btn">取消</CButton>

        <CButton
          @click="determine"
          color="info"
          :disabled="!dragSortDdata.length"
          :class="{
            disableTextBtn: !dragSortDdata.length,
            'system-btn-style': dragSortDdata.length,
          }"
          >确定</CButton
        >
      </template>
    </Modal>
  </div>
</template>
<script>
import draggable from "vuedraggable";
import index from "../../plugins/date-pickers/locale";
export default {
  name: "sortDelog",
  data() {
    return {
      dragSort: false,
      dragSortDdata: [],
    };
  },
  components: { draggable },
  props: {
    dragSortProp: {
      type: Array,
      default() {
        return [];
      },
    },
    confirmData: {
      type: Object,
      default() {
        return {
          isModel: false,
          forName: "title", //显示的字段
          type: "tree",
          url: this.$api.modelApi.groupSort, //树排序
        };
      },
    },
    sortIdFirst: {
      type: Array,
      default(){
        return [];
      }
    }
  },
  mounted() {},
  methods: {
    openOrClose() {
      this.dragSort = !this.dragSort;
    },
    cancel() {
      this.dragSort = false;
      this.dragSortDdata = this.dragSortProp;
    },
    determine() {
      let that = this;
      if (that.confirmData.isModel === "isModel") {
        that.modelSortConfim();
      } else {
        if(this.sortIdFirst.length){ //卫星影像排序
          let sortData = [];
          this.dragSortDdata.forEach((item) => {
            sortData.push(item.id);
          });
          // console.log(sortData,'////');
          // console.log(this.sortIdFirst,'llll');
          let sortDataList = [];
          let obj = {
            id: "",
            sortId: "",
          }
          for(let index = 0;index < sortData.length;index++){
            obj.id = sortData[index];
            obj.sortId = this.sortIdFirst[index];
            sortDataList.push(obj);
            obj = {
              id: "",
              sortId: "",
            }
          }
          console.log(sortDataList,'////');
          this.$axios({
            method: "PUT",
            url: that.confirmData.url,
            contentType: "application/json",
            data: sortDataList,
          })
            .then((res) => {
              if (res.status == 200) {
                if (that.confirmData.type === "tree") {
                  this.$emit("update:SortDdata", that.dragSortDdata); //双向拍好的顺序
                } else {
                  this.$emit("update:SortDdata", ["table"]); //双向拍好的顺序
                }
                that.openOrClose();
                that.$Message.success("排序成功");
              } else {
                that.$Message.error(res.data.message);
              }
            })
            .catch((res) => {
              that.$Message.error(res.data.message);
            });
        }else{
          let sortData = [];
          this.dragSortDdata.forEach((item) => {
            sortData.push(parseInt(item.id));
          });
          this.$axios({
            method: "PUT",
            url: that.confirmData.url,
            contentType: "application/json",
            data: sortData,
          })
            .then((res) => {
              if (res.status == 200) {
                if (that.confirmData.type === "tree") {
                  this.$emit("update:SortDdata", that.dragSortDdata); //双向拍好的顺序
                } else {
                  this.$emit("update:SortDdata", ["table"]); //双向拍好的顺序
                }
                that.openOrClose();
                that.$Message.success("排序成功");
              } else {
                that.$Message.error(res.data.message);
              }
            })
            .catch((res) => {
              that.$Message.error(res.data.message);
            });
        }
      }
    },

    modelSortConfim() {
      let that = this;
      let sortData = [];
      if (that.confirmData.type === "tree") {
        this.dragSortDdata.forEach((item, index) => {
          sortData.push({ id: item.id, sort: index + 1 });
        });
      } else {
        this.dragSortDdata.forEach((item, index) => {
          sortData.push({ id: item.id, sortId: index + 1 });
        });
      }
      this.$axios({
        method: "post",
        url: that.confirmData.url,
        contentType: "application/json",
        data: sortData,
      })
        .then((res) => {
          if (res.data.success) {
            if (that.confirmData.type === "tree") {
              that.$emit("update:SortDdata", that.dragSortDdata); //双向拍好的顺序
            } else {
              that.$emit("update:SortDdata", ["table"]); //双向拍好的顺序
            }
            that.openOrClose();
            that.$Message.success("排序成功");
          } else {
            that.$Message.error(res.data.message);
          }
        })
        .catch((res) => {
          that.$Message.error(res.data.message);
        });
    },
  },
  watch: {
    dragSortProp: {
      handler(newval, oldval) {
        this.dragSortDdata = newval;
      },
      immediate: true,
    },
  },
};
</script>

<style scoped>
/*排序弹框*/
.dragSortStyle /deep/ .ivu-modal-body {
  max-height: calc(100vh - 300px);
  overflow-y: auto;
}

.vertical-center-modal {
  display: flex;
  align-items: center;
  justify-content: center;
}
.dragBox {
  padding: 3px 10px 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
